<template>
	<u-row type="flex" :justify="align">
		<img :src="src" :style="getStyle" />
	</u-row>
</template>

<script>
	export default {
		name: 'onlineCustomImage',
		props: {
			src: {
				type: String
			},
			fit: {
				type: String
			},
			align: {
				type: String,
				default: 'left'
			},
			width: {
				type: String
			},
			height: {
				type: String
			},
			radius: {
				type: String || Number,
				default: 3
			},
			round: {
				type: Boolean,
				default: false
			},
			widget: {
				type: Object
			}
		},
		data() {
			return {
				fileList: []
			}
		},
		computed: {
			getStyle() {
				let temp = this.round ? '50%' : (typeof this.radius === 'number' ? (this.radius + 'px') : this.radius);
        let style = {
          width: this.width != null ? this.width : '200px',
              height: this.height != null ? this.height : '200px',
            'object-fit': this.fit,
            'border-radius': temp
        }
        let str = ''
        for (const styleKey in style) {
          str += `${styleKey}: ${style[styleKey]} ;`
        }
				return str
			}
		}
	}
</script>

<style>
</style>
